<template>
    <!--<div>
      活断层避让分布图
    </div>-->
  <div style="position: relative;height: 100%;">
    <!--图层选择-->
    <div style="padding:20px;">
      <span style="color:#606266;">可选图层：</span>
      <el-checkbox v-model="checkBool1" label="活断层避让分布图（100米）" @change="changeCheckBox1" />
      <el-checkbox v-model="checkBool2" label="活断层避让分布图（200米）" @change="changeCheckBox2" />
    </div>
    <!--地图模块-->
    <Index v-if="showBool" :form1="form1" :form2="form2"></Index>
  </div>
</template>
  
<script setup name="activeFaultAvoidance">
//地图
import Index from '@/map/thematicMap/probeClass/activeFaultAvoidance/index.vue';

//类型
const dataType = ref("activeFaultAvoidance");
const data = reactive({
  form1:{
    level2DataType:"activeFaultAvoidance",
    level3DataType:"activeFaultAvoidance100",
    show:true,
  },
  form2:{
    level2DataType:"activeFaultAvoidance",
    level3DataType:"activeFaultAvoidance200",
    show:true,
  },
})
const { form1,form2 } = toRefs(data)
const showBool = ref(false);
const checkBool1 = ref(true);
const checkBool2 = ref(true);

//活断层避让分布图（100米）
function changeCheckBox1(bool){
  form1.value = {
    level2DataType:"activeFaultAvoidance",
    level3DataType:"activeFaultAvoidance100",
    show:bool,
  }
}

//活断层避让分布图（200米）
function changeCheckBox2(bool){
  form2.value = {
    level2DataType:"activeFaultAvoidance",
    level3DataType:"activeFaultAvoidance200",
    show:bool,
  }
}

onMounted(() => {
  showBool.value = true;
})
</script>
  
<style scoped lang="scss">
  
</style>
  
  